<template>
  <div>
    <a-card :bordered="false" >
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-input-search v-model="queryParam.playlistName" placeholder="查询歌单" @search="listPlaylist" @change="listPlaylist" />
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="display: flex; flex-wrap: wrap;">
        <div v-for="(item,index) in myPlaylist" :key="index">
          <a-col :md="6" :sm="24">
            <a-card hoverable class="card" @mouseover="handleOver($event)" @mouseleave="handleLeave($event)">
              <img
                slot="cover"
                :src="preUrl + item.imageUrl"
                @click="goToMySong(item)"
              />
              <a-card-meta :title="item.playlistName">
                <template slot="description">
                  <div class="ellipsis">{{ item.playlistInfo ? item.playlistInfo : '暂无简介' }}</div>
                </template>
              </a-card-meta>
              <div style="float: right;visibility: hidden">
                <a-popconfirm
                  title="确认删除？"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="remove(item)"
                >
                  <a-icon style="position: absolute;transform:translate(-20%);float: right" type="delete"/>
                </a-popconfirm>
              </div>
            </a-card>
          </a-col>
        </div>
        <div>
          <a-col :md="6" :sm="24">
            <a-card style="width: 198px;height: 266px;margin-right: 15px;margin-top: 15px;background-color: #fafafa">
              <div class="center" style="width: 200px;height: 200px">
                <a-button class="center ant-tag-red" style="width: 65px;height: 65px" type="primary" icon="plus" @click="$refs.addPlaylist.add()"/>
              </div>
              <a-card-meta title=" ">
                <template slot="description">
                  {{ ' ' }}
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </div>
      </div>
      <add-playlist ref="addPlaylist" :tags="tags" @ok="listPlaylist" />
    </a-card>
  </div>
</template>

<script>
  import { queryByUserId, remove } from '@/api/music/playlist'
  import { listAllTag } from '@/api/tag/tag'
  import AddPlaylist from '@/views/music/modules/playlist/AddPlaylist'
  export default {
    components: {
      AddPlaylist
    },
    data () {
      return {
        // 查询参数
        queryParam: {},
        pageNo: 1,
        pageSize: 25,
        myPlaylist: [],
        tags: [],
        preUrl: '/api/file/download/image/',
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接收
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return queryByUserId(Object.assign(parameter, queryJson))
            .then(res => {
              this.myPlaylist = res.data.result
            })
        }
      }
    },
    created () {
      this.listPlaylist()
      listAllTag()
      .then(res => {
        if (res.data.message !== 'error') {
          this.tags = res.data.result
        } else {
          this.$message.error('查询标签失败！')
        }
      })
    },
    methods: {
      changePage (page) {
      },
      handleOver (e) {
        e.currentTarget.children[1].children[1].style.visibility = 'visible'
      },
      handleLeave (e) {
        e.currentTarget.children[1].children[1].style.visibility = 'hidden'
      },
      listPlaylist () {
        const reqParams = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
        queryByUserId(Object.assign(reqParams, queryJson))
          .then(res => {
            if (res.data.message !== 'error') {
              this.myPlaylist = res.data.result.data
            } else {
              this.$message.error('查询歌单失败！')
            }
          })
      },
      goToMySong (record) {
        this.$router.push({ name: 'mySong',
          params: record
        })
      },
      remove (playlist) {
        remove(playlist)
          .then(res => {
            if (res.data.message !== 'error') {
              this.listPlaylist()
              this.$message.success('操作成功！')
            } else {
              this.$message.error('操作失败！')
            }
          })
      }
    }
  }
</script>
<style lang="less" scoped>
  .center {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
  }
  .card {
    width: 200px;
    margin-right: 15px;
    margin-top: 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  img {
    width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  ::v-deep .ant-card-meta-title {
    font-size: 14px !important;
  }
  ::v-deep .ant-card-meta-description {
    font-size: 13px !important;
  }
  ::v-deep .ant-card-body {
    padding: 12px 12px 15px;
  }
</style>
